<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
    />
    <title>代理模式</title>
    <style lang="css">
        .preload{
            display: block;
            width:160px;
            height: 160px;
        }
    </style>
</head>

<body>
    <h2>如果代理对象和本体对象都为一个函数（函数也是对象），函数必然都 能被执行，则可以认为它们也具有一致的“接口”</h2>

    <script type="text/javascript">
        var loadImage = (function(){
            var imgNode = document.createElement('img')
            imgNode.class= 'preload'
            document.body.appendChild(imgNode)
            return function(src){
                imgNode.src = src
            }
        })()
        var proxySetImg = (function(){
            var image = new Image()
            image.onload = function(){
                loadImage(this.src)
            }
            return function (src) {
                loadImage('img/loading.gif')
                image.src = src
            }
        })()
        loadImage('img/loading.gif')

        // proxySetImg('https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1515480232&di=ddc8e182ef41c77f88718dc9ac11fb71&src=http://c.hiphotos.baidu.com/zhidao/pic/item/d6ca7bcb0a46f21f247ac1f4f6246b600d33aecf.jpg')


    </script>

</body>

</html>